<template>
  <view>
    <cu-custom bgColor="bg-white" :isBack="true">
      <block slot="content" class="text-000 text-black">影院搜索</block>
    </cu-custom>
    <!--		    搜索栏-->
    <view class="flex justify-between align-center bg-white padding" style="width:100%">
      <view class="flex" style="width:700rpx">
        <input type="text" placeholder="输入影院名称或地址" style="width:100%;height: 64rpx;"
               class="bg-gray radius padding-lr" v-model="value" @input="inputFill" @confirm="fetchData">
        <text class="iconfont icon-cancel text-gray text-xl relative margin-top-xs" style="right:50rpx" v-if="value"
              @tap="off"></text>
      </view>
      <view class="margin-left" style="width:10%" @tap="cancle">取消</view>
    </view>
    <!--    搜索列表开始-->
    <view class="padding-lr-sm">
      <view class="flex justify-between solid-bottom padding-tb-sm" @tap="" v-for="(item,index) in data.list" @tap="url(item)" :key="index">
        <view class="flex flex-direction">
          <view class="text-000 text-bold margin-bottom-sm" style="overflow: hidden; text-overflow: ellipsis;width: 550rpx;white-space: nowrap">{{item.cinema_name}}</view>
          <view class="text-gray" style="overflow: hidden;text-overflow: ellipsis;width: 550rpx;white-space: nowrap">{{item.address}}</view>
        </view>
        <view class="flex flex-direction">
          <view class="margin-bottom-sm"><text class="text-red text-bold text-lg margin-right-xs inline-block">{{item.price}}</text><text class="text-gray">元起</text></view>
          <view class="text-gray text-right" style="overflow: hidden;text-overflow: ellipsis;white-space: nowrap">{{item.distance}}</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      current_page: 1,
      search: '',
      value: ''
    }
  },
  computed: {
    location() {
      return this.$tools.location();
    },
    url(item) {
      return function (item) {
        return `/pages/cinema/movie_cinema?show_id=${item.yid}&name=${item.show_name}`
      }

    }
  },
  methods: {
    inputFill(e) {
      this.keyword = e.detail.value
    },
    async fetchData() {
      let res = await this.$api.search({keyword: this.keyword, city_name: this.location.city, page: this.current_page})
      this.search = res.data.list
    },
    cancle() {
      console.log('cancel')
      this.value = ""
      this.search = []
    },
    off(e) {
      console.log('aaaaaaaaaa')
      console.log(e)
      this.value = ''
    }
  }
}
</script>

<style>
</style>